<!-- 最近的订单表格 -->
<template>
  <div id="RecentOrders">
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      size="small"
      highlight-current-row
      max-height="300"
      stripe
    >
      <el-table-column type="index" label="#" :index="indexMethod" align="center" />
      <el-table-column prop="product" label="商品名称" align="center" />
      <el-table-column prop="customer" label="客户" align="center" width="180" />
      <el-table-column prop="price" label="价格" align="center" width="180" />
      <!-- // 状态，0 待支付 1 已下单 2 未出库 3 出库中 4 已出库 5 运输中 6 待收货 7 已收货 8 待评价 9 已完成 -->
      <el-table-column prop="status" label="订单状态" align="center" width="180">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === '0'|| scope.row.status === '2' || scope.row.status === '8'?'danger':
              scope.row.status === '1'|| scope.row.status === '3' || scope.row.status === '5'?'warning':
              'success'"
            size="small"
            effect="dark"
          >
            {{
              scope.row.status === '0'? '待支付':
              scope.row.status === '1'? '已下单':
              scope.row.status === '2'? '未出库':
              scope.row.status === '3'? '出库中':
              scope.row.status === '4'? '已出库':
              scope.row.status === '5'? '运输中':
              scope.row.status === '6'? '待收货':
              scope.row.status === '7'? '已收货':
              scope.row.status === '8'? '待评价':
              scope.row.status === '9'? '已完成':
              '/'
            }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'RecentOrders',
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 表格索引
    indexMethod(index) {
      return `${index + 1}`
    }
  }
}
</script>

<style lang='scss' scoped>
#RecentOrders {
  height: 306px;
}
</style>
